<div class="area_block">
    <input type="hidden" name="{$name}" value="{$value}">
    <div class="layui-input-inline" style="width: 150px">
        <select name="p_{$name}" lay-filter="p_{$name}" lay-search>
            <option value="">请选择省</option>
        </select>
    </div>
    <div class="layui-input-inline" style="max-width: 200px">
        <select name="c_{$name}" lay-filter="c_{$name}" lay-search>
            <option value="">请选择市</option>
        </select>
    </div>
    <div class="layui-input-inline" style="max-width: 200px">
        <select name="d_{$name}" lay-filter="d_{$name}" lay-search>
            <option value="">请选择县/区</option>
        </select>
    </div>
</div>

<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var province = parseInt("{$province?:0}");
        var city = parseInt("{$city?:0}");
        var district = parseInt("{$district?:0}");

        function render_select(name, pid, txt, level, selected) {
            var $obj = $('select[name="' + name + '"]');
            if (level == -1) {
                var html = '<option value="">' + txt + '</option>';
                $obj.html(html);
                form.render();
                return false;
            }
            $.post('{:widget_url("core/Area/getDistrict")}?pid=' + pid, {}, function (res) {
                var html = '<option value="">' + txt + '</option>';
                for (var i in res) {
                    var s_txt = '';
                    if (typeof(selected) != 'undefined' && selected == res[i].id) {
                        s_txt = 'selected';
                    }
                    html += '<option ' + s_txt + ' value="' + res[i].id + '">' + res[i].name + '</option>'
                }
                $obj.html(html);
                form.render();
                form.on('select(' + name + ')', function (data) {
                    var pid = data.value
                    if (level == 1) {
                        render_select("c_{$name}", pid, '请选择市', 2);
                        render_select("d_{$name}", pid, '请选择县/区', -1);  //将县置为空
                    }
                    if (level == 2) {
                        render_select("d_{$name}", pid, '请选择县/区', 3);
                    }
                    var $block = $(data.elem).closest('.area_block');
                    if (level == 3) {
                        //设置地区
                        $block.find('input[type="hidden"]').val([$block.find('[name="p_{$name}"]').val(), $block.find('[name="c_{$name}"]').val(), $block.find('[name="d_{$name}"]').val()].join(','));
                    } else {
                        $block.find('input[type="hidden"]').val('');
                    }
                });
            })
        }

        render_select("p_{$name}", '0', '请选择省', 1, province);
        if (province != 0) {
            render_select("c_{$name}", province, '请选择市', 2, city);
            if (city != 0) {
                render_select("d_{$name}", city, '请选择县/区', 3, district);
            }
        }
    })
</script>